<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>methods 选项的四个知识点</title>
	</head>

	<body>
		<div id="app">
			<h2>methods 选项的四个知识点</h2>
			<hr />
			<p>{{num}}</p>
			<p><button @click="add">构造器内部add</button></p>
			<p><button @click="add1(2)">传值add</button></p>
			<p>
				<btn @click.native="add"></btn>
			</p>
			<strong style="color: red;text-indent: 2em;">@click.native---指组件调用methods里面的原始方法</strong>
		</div><hr />
		<p><button onclick="vm.add1(5)">构造器外部调用add</button></p>
		<strong style="color: red;text-indent: 2em;">在构造器外部调用构造器的方法，构造器是个对象，调用方法：vm.add(),<br />构造器外部点击时间需要用javascript的方法，vue点击@click不能使用</strong>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var btnComponent = {
				template: `<button>自定义组件add</button>`
			}
			var vm = new Vue({
				el: '#app',
				data: {
					num: 1
				},
				components: {
					'btn': {
						template: `<button>自定义组件add</button>`
					}
				},
				methods: {
					add: function() { //单纯的点击事件
						this.num++;
					},
					add1: function(num) { //传值添加
						this.num += num;
						//console.log(event)		//event 类似于javascript中的事件源，适用于更精细化的交互
					}
				}
			});
		</script>
	</body>

</html>